<template>
  <div class="app-container">
<!--    表格组件-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="参数名称" width="240" align="center">
        <template slot-scope="scope">
          {{ scope.row.argument }}
        </template>
      </el-table-column>
      <el-table-column label="参数值" width="240" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.value" />
        </template>
      </el-table-column>
      <el-table-column label="创建者" width="240" align="center">
        <template slot-scope="scope">
          {{ scope.row.createAdminTrueName}}
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="240" align="center">
        <template slot-scope="scope">
          {{ scope.row.createDate }}
        </template>
      </el-table-column>
      <el-table-column label="最近修改者" width="240" align="center">
        <template slot-scope="scope">
          {{ scope.row.lastModifyName }}
        </template>
      </el-table-column>
      <el-table-column label="最近修改日期" width="240" align="center">
        <template slot-scope="scope">
          {{ scope.row.lastModifydate }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small"  @click="handleChange(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
        background

        @current-change="handleCurrentChange"

        :current-page="pagination.currentPage"

        :page-size="pagination.pageSize"

        layout="total, prev, pager, next, jumper"

        :total="pagination.total">

      </el-pagination>
    </div>

  </div>
</template>

<script>
import api from '@/api/Dict'

export default {
  data() {
    return {
      list: [],
      listLoading: true,
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
    //查询所有
    getAll() {
      api.getList(this.pagination).then(response => {
        this.list = response.data.page.content
        this.pagination.currentPage = response.data.page.number + 1
        this.pagination.pageSize = response.data.page.size
        this.pagination.total = response.data.page.totalElements
        this.listLoading = false
        console.log(this.list)
        }
      )
    },
    handleChange(row){
      api.modify(row).then(res=>{
        if(!res.success)
          this.$message.warning(res.message)
        this.getAll()
      })
    },

    fetchData() {
      this.listLoading = true

      this.getAll()
    },

  }
}
</script>
